<template>
    <div class="listDiv">
        <div class="searchDiv">
            <el-select v-model="obj.req.state" placeholder="状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.parkStateList" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-select v-model="obj.req.type" placeholder="类别" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.parkingTypeList" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
                <span class="btn add" @click="add">添加车位</span>
            </div>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="mw200">车位名称</li>
                <li class="mw300">车位说明</li>
                <li class="wcen">车位类别</li>
                <li class="mw200 wcen">绑定车牌</li>
                <li class="wcen">联系人</li>
                <li class="mw180 wcen">联系电话</li>
                <li class="mw220 wcen">租赁起始时间</li>
                <li class="mw220 wcen">租赁到期时间</li>
                <li class="wcen">续费状态</li>
                <li class="wcen">车位状态</li>
                <li class="mw200 wcen">操作</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="mw200">{{x.name}}</li>
                    <li class="mw300">
                        <el-tooltip class="box-item" effect="dark" :content="x.memo" placement="top-start" :disabled="x.memo.length<17">
                            <div class="lineOne pointer">{{x.memo}}</div>
                        </el-tooltip>
                    </li>
                    <li class="wcen">
                        <div :class="[proxy.$utils.find(globalData.parkingTypeList, x.type,'label')]">{{proxy.$utils.find(globalData.parkingTypeList, x.type)}}</div>
                    </li>
                    <li class="mw200 wcen">
                        <div class="flex-row-center">
                            <span class="mr10">{{x.plate_name}}</span>
                            <DelConfirm title="确定要解绑吗？" text="解绑" class="" @yesClick="del(x)" />
                        </div>
                    </li>
                    <li class="wcen">{{x.man}}</li>
                    <li class="mw180 wcen">{{x.mobile}}</li>
                    <li class="mw220 wcen">{{x.starttime}}</li>
                    <li class="mw220 wcen">{{x.endtime}}</li>
                    <li class="wcen">
                        <div class="flex-row-center" v-if="fixtime(x.endtime,15).v>1">
                            <span class="warning-color">{{fixtime(x.endtime,15).v>1?'已到期':''}}</span>
                            <span class="w-base-color ml10">提醒续租</span>
                        </div>
                        <span v-else>--</span>
                    </li>
                    <li class="wcen"><span :class="[x.state?'success-color':'warning-color']">{{x.state==1?'已租':'待租'}}</span></li>
                    <li class="mw200 wcen">
                        <el-button class="edit_btn mr10" type="success" @click="edit(x)">修改</el-button>
                        <!-- <DelConfirm class="" @yesClick="del(x)" /> -->
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />

        <el-dialog v-model="obj.drawer.design" :title="obj.drawer.designTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Edit :param="obj.drawer.param" @close="obj.drawer.design = false" @init="init" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import Edit from "./park_edit.vue"
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            param: {},
            design: false,
            designTitle: "",
        },
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
            verify:"",
            type: ""
        }
    });
    let init = () => {
        proxy.$ajax({
            url: '/parking/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }
    let fix = computed(() => {
        return (x,type) => {
            if(x[type] == 0) return (type==='type'?'不限':{text:'待审核',color:'warning-color',label:'label-btn-warning'})
            if(x[type] == 1) return (type==='type'?'固定':{text:'通过',color:'success-color',label:'label-btn-success'})
            if(x[type] == 2) return (type==='type'?'非固定':{text:'拒绝',color:'danger-color',label:'label-btn-error'})
        }
    })

    let fixtime = computed(() => {
        return (endtime,day) => {
            if(!endtime) return {t:'',v:0}
            let end = new Date(endtime), now = new Date()
            if (end < now) return {t:'已到期',v:2}
            if ((end - day*86400000) < now) return {t:'即将到期',v:1}
            return {t:'',v:0}
        }
    })
    let add = () => {
        obj.drawer.design = true
        obj.drawer.designTitle = "添加车位"
        obj.drawer.param = {
            "parking_id":"0",
            "name":"",
            "type":"",
            "memo":""
        };
    }
    let edit = x => {
        obj.drawer.design = true
        obj.drawer.designTitle = "修改车位"
        obj.drawer.param = x;
    }
    let del = x => {
        proxy.$ajax({
            url: '/parking/unbind',
            data: { plate_id: x.plate_id, parking_id: x.parking_id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("解绑成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    #tb ul li.li1 { width: 60px; }
    #tb ul li.li2 { width: 75px; }
    #tb ul li.li5 { width: 75px; }
    #tb ul li.li6 { width: 55px; }
    #tb ul li.li7 { width: 75px; }
</style>